<template>
  <div v-waterMarker class="merak-card merak-container-has-search">
    <searchForm
      ref="searchRef"
      :tableId="searchState.tableId"
      v-model="searchData"
      :type="props.type"
      :auth="auth"
      :formValue="searchFormValue"
      :setValue="props.setValue"
      :treeSelected="props.treeSelected"
      @fast-search="handleFastSearch"
      @form-search="handleFormSearch"
      @custom-search="handleCustomSearch"
      @add="handleAddNew"
    />
    <div class="all_hint" v-if="!!props.treeSelected && props.treeSelected == '0'">
      <el-icon color="#E74C3D" size="14"><WarningFilled /></el-icon>{{ $t("goods_information_consumer.all_hint") }}
    </div>
    <div class="merak-table-wrapper">
      <MerakXTable
        v-if="!!props.treeSelected?.toString()"
        ref="tableRef"
        v-bind="tableState"
        :pictureExport="true"
        :batches="tableBatches"
        :handles="tableHandler"
        :params="tableParams"
        :query-columns="handleQueryColumns"
        :query-data="handleQueryData"
        :batch-click="handleBatchClick"
        :handler-click="handleHandlerClick"
      >
        <template v-if="isEmpty" #empty>
          <div class="empty_box">
            <img class="empty_img" :src="EmptyImage" />
            <div class="empty_msg">{{ isEmptyMsg }}</div>
          </div>
        </template>
        <template #img_box="{ row }">
          <div class="user_box">
            <div class="video_icon" v-if="!!row.video_path">
              <el-icon color="#fff" size="20">
                <VideoCameraFilled />
              </el-icon>
            </div>
            <el-image
              v-if="!!row.image"
              fit="cover"
              style="cursor: pointer"
              :src="row.image+'_60x60.jpg'"
              @click="handleLookImage(row.image)"
            />
            <el-image v-else fit="cover" :src="GoodImage" />
            <!-- <el-image fit="cover" :src="!!row.image ? row.image : GoodImage"
							:preview-src-list="!!row.image ? [row.image] : undefined"
							:style="{ cursor: !!row.image ? 'pointer' : 'default' }" preview-teleported>
							
						</el-image>	 -->
            <!-- <el-image  /> -->
          </div>
        </template>
        <template #cc_checked_box="{ row }">
          <div
            @click="showErrorMsg(row, 'is_cc_checked_value', 'cc_msg')"
            :class="row.is_cc_checked_value == 1 ? 'checked_type_success' : 'checked_type_error'"
          >
            {{ row.is_cc_checked }}
            <el-icon v-if="row.is_cc_checked_value == 0 && row.cc_msg.length > 0" size="14" color="#F93A4A">
              <WarningFilled />
            </el-icon>
            <el-icon v-else-if="row.is_cc_checked_value == 0 && row.cc_msg.length == 0" size="14" color="#ccc">
              <CircleCheckFilled />
            </el-icon>
          </div>
        </template>
        <template #qf_checked_box="{ row }">
          <div
            @click="showErrorMsg(row, 'is_qf_checked_value', 'prop_msg')"
            :class="row.is_qf_checked_value == 1 ? 'checked_type_success' : 'checked_type_error'"
          >
            {{ row.is_qf_checked }}
            <el-icon v-if="row.is_qf_checked_value == 0 && row.prop_msg.length > 0" size="14" color="#F93A4A">
              <WarningFilled />
            </el-icon>
            <el-icon v-else-if="row.is_qf_checked_value == 0 && row.prop_msg.length == 0" size="14" color="#ccc">
              <CircleCheckFilled />
            </el-icon>
          </div>
        </template>
        <template #custom_handle="{ row }">
          <el-button type="primary" link @click="quickShowFn(row, quickList)">{{
            $t("goods_information_consumer.quick_look")
          }}</el-button>
        </template>
      </MerakXTable>
    </div>
    <div style="position: absolute">
      <batchQueueComponent></batchQueueComponent>
      <quickViewComponet></quickViewComponet>
      <editPropsComponent></editPropsComponent>
      <editCustomsClearanceComponent></editCustomsClearanceComponent>
      <applicationLabelComponent></applicationLabelComponent>
      <div class="errorList">
        <el-dialog v-model="centerDialogVisible" :title="$t('goods_information_consumer.auditing_hint')" width="600" center>
          <el-scrollbar height="200">
            <div class="errorList">
              <div class="errorItem" v-for="(item, index) in errorMsgList">{{ item }}</div>
            </div>
          </el-scrollbar>
          <template #footer>
            <div class="dialog-footer">
              <el-button v-if="auth?.edit?.show" @click="goDetailPage" type="primary" plain>{{
                $t("goods_information_consumer.supplement")
              }}</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { getCurrentInstance, inject, ref, reactive, computed, onMounted, watch } from "vue";
import { failMsg, successMsg } from "@/utils/messageUtils";
import { useRouter,useRoute } from "vue-router";

import { ElMessage, ElMessageBox, ElButton, ElImage } from "element-plus";

import { useGlobalStore } from "@/stores/modules/global";

import MerakXTable, {
  MerakXTableInstance,
  MerakXTableProps,
  MerakXTableEditorParams,
  MerakXTableDropdown
} from "@/components/MerakXTable";

import searchForm from "./SearchForm.vue";

import { ResultEnum } from "@/enums/httpEnum";
import {
  RouteType,
  getTableFields,
  getTableData,
  batchDeleteApi,
  batchCustomsClearanceAuditingApi,
  batchCancelAuditingApi,
  batchQifaAuditingApi,
  saveBatchEditClearanceProps,
  saveEditQifaProps
} from "@/api/modules/goodsArchive/list/information";
import { useUserStore } from "@/stores/modules/user";

import GoodImage from "@/assets/images/goods_img.webp";
import EmptyImage from "@/assets/images/empty_img.png";
import { confirmWarningMsg } from "@/utils/messageUtils";
import I18n from "@/languages/index";
import { api as viewerApi } from "v-viewer";
const $t = I18n.global.t;
const userStore = useUserStore();
const props = defineProps<{
  tableId?: string;
  type: RouteType;
  queueId?: string;
  treeSelected?: string;
  setValue?: string;
  lazy?: boolean;
  label?: any;
}>();

// 快速查看
const enumState = reactive<{
  visible: boolean;
}>({
  visible: false
});
// 修改弹窗
const editState = reactive<{
  visible: boolean;
}>({
  visible: false
});
const emit = defineEmits<{
  add: [
    params: {
      copyId?: string | number;
      typeId?: string | number;
      typeTitle?: string;
      suite?: 0 | 1;
    }
  ];
}>();

const router = useRouter();
const route = useRoute();

const { language } = useGlobalStore();

const currentInstance = getCurrentInstance();

// 注入顶层权限
const auth = inject("auth");

const searchBarRef = ref<InstanceType<typeof SearchBar>>();

const searchRef = ref<InstanceType<typeof SearchForm>>();

const tableRef = ref<MerakXTableInstance>();

const quickList = ref({});

const centerDialogVisible = ref(false);
const errorMsgList = ref([]);
const errorMsg = ref({});
const isEmpty = ref(false);
const isEmptyMsg = ref("");
// 高级搜索数据
const searchData = reactive({});

// 高级搜索相关属性
const searchState = reactive<{
  tableId?: string;
  search?: any;
  params?: Record<string, any>;
  filterParams: FilterType;
}>({
  filterParams: {}
});

// 表格相关属性
const tableState = reactive<MerakXTableProps>({
  columns: [],
  columnsByStore: [],
  pagination: {
    pageSize: 20
  },
  rowKey: "product_id",
  rowHeight: 46,
  // awaitParams: true,
  config: {},
  columnType: [
    "selection",
    {
      type: "handle",
      width: language == "zh" ? 95 : 130,
      showHandleDropDown: true,
      slot: "custom_handle"
    }
  ]
});
const handleLookImage = images => {
  viewerApi({
    images: [
      {
        file_url: images
      }
    ],
    options: {
      toolbar: true,
      url: "file_url",
      fullscreen: false,
      initialViewIndex: 0
    }
  });
};
// 给予高级搜索表单验证的值
const searchFormValue = computed(() => {
  const value: Record<string, any> = {};
  Object.keys(searchData).forEach(key => {
    value[key] = searchData[key].value;
  });
  return value;
});

const tableBatches = computed(() => {
  const batchesConfig = {
    qifa_edit: {
      type: "qifa_edit",
      text: $t("goods_information_consumer.edit_qifa")
    },
    clearance_edit: {
      type: "clearance_edit",
      text: $t("goods_information_consumer.edit_clearance")
    },
    qifa_edit_sku: {
      type: "qifa_edit_sku",
      text: $t("goods_information_consumer.edit_qifa_sku")
    },
    // clearance_edit_sku: {
    // 	type: "clearance_edit_sku",
    // 	text: $t("goods_archive.edit_clearance_sku")
    // },
    qifa: {
      type: "qifa",
      text: $t("goods_information_consumer.audit_qifa")
    },
    clearance: {
      type: "clearance",
      text: $t("goods_information_consumer.audit_clearance")
    },
    cancelAuditQifa: {
      //取消审核 ，只给 user_id 为 [6,9,13,19]  显示，--凡秀
      type: "cancelAuditQifa",
      text: $t("goods_archive.cancel_audit_qifa")
    },
    cancelAuditClearance: {
      //取消审核 ，只给 user_id 为 [6,9,13,19]  显示，--凡秀
      type: "cancelAuditClearance",
      text: $t("goods_archive.cancel_audit_clearance")
    },
    label: {
      //申请电子标签
      type: "application_label",
      text: $t("goods_information_consumer.application_label"),
      //color:props.label != 1?'#c0c4cc':'',
      disabled: () => {
        if (props.label != 1) {
          return true;
        } else {
          return false;
        }
      }
    },
    delete: {
      type: "delete",
      text: $t("merak.delete"),
      color: "red"
    }
  };
  console.log(batchesConfig);
  if (props.treeSelected == 0) {
    //左侧树--全部或者没有权限时候 不使用下面批量配置
    delete batchesConfig["qifa_edit"];
    delete batchesConfig["clearance_edit"];
    delete batchesConfig["qifa"];
    delete batchesConfig["clearance"];
    delete batchesConfig["qifa_edit_sku"];
    delete batchesConfig["clearance_edit_sku"];
    delete batchesConfig["label"];
    delete batchesConfig["cancelAuditClearance"];
    delete batchesConfig["cancelAuditQifa"];
  }

  if (props.type == "mro") {
    delete batchesConfig["qifa_edit"];
    delete batchesConfig["clearance_edit"];
    delete batchesConfig["qifa"];
    delete batchesConfig["clearance"];
  }
  if (auth?.edit?.show == false) {
    delete batchesConfig["qifa_edit"];
    delete batchesConfig["clearance_edit"];
    //delete batchesConfig["qifa"];
    //delete batchesConfig["clearance"];
  }

  if (auth?.qifaAudit?.show == false) {
    //当频道为 工业品时，禁止编辑企发销售属性和清关属性,chenjing20240612
    delete batchesConfig["qifa"];
  }
  if (auth?.ccAudit?.show == false) {
    //当频道为 工业品时，禁止编辑企发销售属性和清关属性,chenjing20240612
    delete batchesConfig["clearance"];
  }
  if (auth?.tag?.show == false) {
    delete batchesConfig["label"];
  }
  if (auth?.detele?.show == false) {
    delete batchesConfig["delete"];
  }
  if (auth?.cancelAudit?.show == false) {
    delete batchesConfig["cancelAudit"];
  }
  const batches: MerakXTableDropdown[] = Object.values(batchesConfig);
  return batches;
});

// 给予表格操作权限
const tableHandler = computed(() => {
  const handlesMap = {
    detail: {
      type: "detail",
      text: $t("goods_information_consumer.detail")
    },
    copy: {
      type: "copy",
      text: $t("goods_information_consumer.copy")
    },
    qifa: {
      type: "qifa",
      text: $t("goods_information_consumer.audit_qifa"),
      disabled: row => {
        if (row.is_qf_checked_value == 1) {
          return true;
        } else {
          return false;
        }
      }
    },
    clearance: {
      type: "clearance",
      text: $t("goods_information_consumer.audit_clearance"),
      disabled: row => {
        if (row.is_cc_checked_value == 1) {
          return true;
        } else {
          return false;
        }
      }
    },
    cancelAuditQifa: {
      //取消企发销售审核 ，
      type: "cancelAuditQifa",
      text: $t("goods_archive.cancel_audit_qifa")
    },
    cancelAuditClearance: {
      //取消清关审核 ，
      type: "cancelAuditClearance",
      text: $t("goods_archive.cancel_audit_clearance")
    },
    label: {
      //申请电子标签
      type: "application_label",
      text: $t("goods_information_consumer.application_label"),
      disabled: row => {
        if (row.is_label == 1) {
          return false;
        } else {
          return true;
        }
      }
    },
    delete: {
      type: "delete",
      text: $t("merak.delete"),
      color: "red"
    }
  };
  const handles: MerakXTableDropdown[] = [];

  //if(props.type=="mro"){
  // 	auth?.edit?.show=false;
  // }

  if (auth?.add?.show == false) {
    //左侧树--全部或者没有权限时候 不使用下面配置
    delete handlesMap["copy"];
  }
  if (auth?.qifaAudit?.show == false || props.type == "mro") {
    //当频道为 工业品时，禁止编辑企发销售属性和清关属性,chenjing20240612
    //左侧树--全部或者没有权限时候 不使用下面配置
    delete handlesMap["qifa"];
  }
  if (auth?.ccAudit?.show == false || props.type == "mro") {
    //当频道为 工业品时，禁止编辑企发销售属性和清关属性,chenjing20240612
    //左侧树--全部或者没有权限时候 不使用下面配置
    delete handlesMap["clearance"];
  }
  if (auth?.tag?.show == false) {
    //当频道为 工业品时，禁止编辑企发销售属性和清关属性,chenjing20240612
    //左侧树--全部或者没有权限时候 不使用下面配置
    delete handlesMap["label"];
  }
  if (auth?.detele?.show == false) {
    delete handlesMap["delete"];
  }
  if (auth?.cancelAuditQifa?.show == false) {
    // 24-06-27 只给 user_id 为 [6,9,13,19]  显示，--凡秀
    delete handlesMap["cancelAuditQifa"];
  }
  if (auth?.cancelAuditClearance?.show == false) {
    // 24-06-27 只给 user_id 为 [6,9,13,19]  显示，--凡秀
    delete handlesMap["cancelAuditClearance"];
  }

  //console.log(handlesMap)

  return Object.values(handlesMap);
});

// 给予表格编辑权限
const tableEditorAuth = computed(() => {
  let flag = false;
  if (!!auth?.edit?.show) {
    flag = true;
  }
  return flag;
});

// 给予表格搜索参数
const tableParams = computed(() => {
  const params: Record<string, any> = {};
  if (!!props.type) {
    params.type = props.type;
  }
  if (!!props.treeSelected) {
    params.type_id = props.treeSelected;
  }
  if (!!props.setValue) {
    params.set = props.setValue;
  }
  if (!!searchState.params) {
    Object.assign(params, searchState.params);
  }
  // 高级搜索
  const searchValue: Record<string, any> = {};
  switch (searchState.filterParams.action) {
    // 快速搜索
    case "enter":
      Object.assign(searchValue, {
        key_words: searchState.filterParams.search
      });
      break;
    // 定制搜索
    case "customSearch":
      Object.assign(searchValue, {
        [searchState.filterParams.params.customSearchType]: searchState.filterParams.params.value,
        is_like: searchState.filterParams.params.is_like
      });
      break;
    // 方案搜索
    case "plan":
    case "form":
      const params: Record<string, any> = {};
      for (let [key, value] of Object.entries(searchState.filterParams.params ?? {})) {
        if (Array.isArray(value)) {
          if (!!value.length) {
            params[key] = value;
          }
          continue;
        }
        if (typeof value === "number" || !!value) {
          params[key] = value;
        }
      }
      Object.assign(searchValue, {
        ...params
      });
      break;
    default:
      break;
  }
  // 计算表格筛选数据
  return {
    ...params,
    ...searchValue
  };
});

//展示未通过原因
const showErrorMsg = (row, key, keys) => {
  if (row[key] == 0 && row[keys].length > 0) {
    centerDialogVisible.value = true;
    errorMsgList.value = row[keys];
    const copyId = row?.product_id;
    const typeId = row?.type_id;
    const goodsId=row?.goods_id;
    const suite = !!row?.is_packing ? 1 : 0;
    errorMsg.value = {
      t_id: typeId,
      p_id: copyId,
      s_id: suite,
      type: props.type,
      key: "sku_info",
        g_id: goodsId, 
			  name: row?.spu
    };
  } else if (row[key] == 0 && row[keys].length == 0) {
    ElMessageBox.alert($t("goods_information_consumer.show_success"));
  }
};
//展示未通过原因
const goDetailPage = () => {
  router.push({
    name: "goodsDetailMessage",
    query: errorMsg.value
  });
};

// 高级搜索
const handleSearchEvent = (params: { search: any; params: Record<string, any> }) => {
  const payload: Record<string, any> = {};
  searchState.search = params.search;
  Object.keys(params.params).forEach(key => {
    if (!key.includes("_options")) {
      payload[key] = params.params[key];
    }
  });
  searchState.params = payload;
};

// 高级搜索组件快速搜索触发事件
const handleFastSearch = (params: FilterType) => {
  searchState.filterParams = params;

  searchRef.value?.customSearchClear();
};

// 高级搜索组件表单搜索触发事件
const handleFormSearch = (params: Record<string, any>) => {
  searchState.filterParams = {
    action: "form",
    params
  };

  searchRef.value?.customSearchClear();
};
// 商品档案定制搜索搜索触发事件
const handleCustomSearch = (params: Record<string, any>, searchBar) => {
  console.log(params);
  console.log(searchBar);
  searchBar.value?.clear();
  searchBar.value?.modalHide();
  searchState.filterParams = {
    action: "customSearch",
    params
  };
};

// watch([() => props.treeSelected, () => props.type, () => props.setValue], () => {
// 	if (props.treeSelected != undefined && props.type != undefined) {
// 		handleQueryColumns();
// 	}
// });

// 请求表头
const handleQueryColumns: MerakXTableProps["queryColumns"] = async () => {
  let dataMsg = {
    type_id: props.treeSelected,
    set: props.setValue ?? 0,
    type: props.type
  };
  return getTableFields(dataMsg, props.queueId).then(({ code, data }) => {
    if (code == ResultEnum.SUCCESS) {
      const columns = data.columns as MerakXTableColumn[];
      // 存储表格ID
      searchState.tableId = data.table_id;

      // tableState.pagination!.pageSize = data.pageSize

      tableState.config.table_id = data.table_id;
      tableState.config.version = data.version;
      // 高级搜索获取搜索方案
      searchRef.value?.getPlan(data.table_id);
      // 克隆表头数据作为列设置的对照数据
      auth.value = data.auth_list;
      let columnsGrouping = {
        basic: [],
        cc_prop: [],
        prop: []
      };
      columns.map(cItem => {
        if (cItem.class == "basic") {
          columnsGrouping.basic.push({
            field: cItem.field,
            title: cItem.title
          });
        } else if (cItem.class == "cc_prop") {
          columnsGrouping.cc_prop.push({
            field: cItem.field,
            title: cItem.title
          });
        } else if (cItem.class == "prop") {
          columnsGrouping.prop.push({
            field: cItem.field,
            title: cItem.title
          });
        }
        if (cItem.field == "is_cc_checked") {
          cItem.slots = {
            default: "cc_checked_box"
          };
        }
        if (cItem.field == "is_qf_checked") {
          cItem.slots = {
            default: "qf_checked_box"
          };
        }
        if (cItem.field == "image") {
          cItem.slots = {
            default: "img_box"
          };
          cItem.width = "40px";
          cItem.paddingLeft = "0px";
          cItem.fixed = "left";
          cItem.resizable = false;
        }
        if (cItem.field == "sku" || cItem.field == "spu") {
          cItem.fixed = "left";
		  if(cItem.field == "sku"){
			  cItem.width = "220px";
		  } else {
			  cItem.width = "200px";
		  }
		  
        }
        if (cItem.class == "cc_prop") {
          cItem.slots = {
            header: ({ column }) => {
              return (
                <div className="headTitle">
                  {" "}
                  <div class="name"> {column.title} </div>
                  <el-icon color="#28ae60" size="15">
                    <Van />{" "}
                  </el-icon>
                </div>
              );
            }
          };
          cItem.params = {
            otherWidth: 15
          };
        }
        if (cItem.class == "prop") {
          cItem.slots = {
            header: ({ column }) => {
              return (
                <div className="headTitle">
                  {" "}
                  <div class="name"> {column.title} </div>
                  <el-icon color="#1677ff" size="14">
                    <Goods />
                  </el-icon>
                </div>
              );
            }
          };
          cItem.params = {
            otherWidth: 15
          };
        }
      });
      tableState.columnsByStore = JSON.parse(JSON.stringify(columns));
      quickList.value = columnsGrouping;
      //tableState.columns = columns;

      return {
        ...data,
        columns
      };
    }
  });
};

// 添加商品
const handleAddNew = (suite)=> {
  setMenuIdFun()
  emit('add', { suite })
}

// 请求表格数据
const handleQueryData: MerakXTableProps["queryData"] = async ({ page, sort, from }) => {
  const params: Record<string, any> = {};
  if (!!page) {
    Object.assign(params, page);
  }
  if (!!from) {
    Object.assign(params, from);
  }
  return getTableData(params, props.queueId).then(({ code, data }) => {
    if (code == ResultEnum.SUCCESS) {
      if (page.currentPage * page.pageSize > 10000) {
        if (data.table_data.length == 0) {
          //failMsg(data.msg)
          isEmptyMsg.value = data.msg;
          isEmpty.value = true;
        } else {
          isEmpty.value = false;
        }
      } else {
        isEmpty.value = false;
      }
      return data.table_data;
    }
  });
};

// 表格编辑事件
const handleEditorClick: MerakXTableInstance["onEditor-click"] = params => {
  editorState.props = {
    ...params
  };
  editorState.visible = true;
};

// 批量操作
const handleBatchClick: MerakXTableProps["handlerClick"] = async ({ type, params, selectedKeys }) => {
  switch (type) {
    case "qifa_edit":
      editQifaPropsShowFn({
        queue: [...selectedKeys],
        query: {
          type_id: props.treeSelected,
          is_sku: 0
        },
        callback: params => {
          batchQueueRun({
            postFn: saveEditQifaProps,
            params: {
              ...params
            }, //格外参数
            queueDataList: params.queue, //队列数据
            queueApiKey: "product_ids",
            duration: 3, //自动关闭时间，默认不关闭
            // key: "id",//如果你的 queueDataList 是个数组对象，可以通过指定提取 key 的方式，来获取到队列数据
            step: 5, //单次上传的数量
            callback: () => {
              tableRef.value?.finishedBatch();
              tableRef.value?.reloadData();
            }
          });
        }
      });
      break;
    case "clearance_edit":
      //   editState.visible = true;
      editCustomsClearanceShowFn({
        queue: [...selectedKeys],
        query: {
          type_id: props.treeSelected,
          is_sku: 0
        },
        callback: params => {
          batchQueueRun({
            postFn: saveBatchEditClearanceProps,
            params: {
              ...params
            }, //格外参数
            queueDataList: params.queue, //队列数据
            queueApiKey: "product_ids",
            duration: 3, //自动关闭时间，默认不关闭
            // key: "id",//如果你的 queueDataList 是个数组对象，可以通过指定提取 key 的方式，来获取到队列数据
            step: 5, //单次上传的数量
            callback: () => {
              tableRef.value?.finishedBatch();
              tableRef.value?.reloadData();
            }
          });
        }
      });
      break;
    case "qifa_edit_sku":
      editQifaPropsShowFn({
        queue: [...selectedKeys],
        query: {
          type_id: props.treeSelected,
          is_sku: 1
        },
        callback: params => {
          batchQueueRun({
            postFn: saveEditQifaProps,
            params: {
              ...params
            }, //格外参数
            queueDataList: params.queue, //队列数据
            queueApiKey: "product_ids",
            duration: 3, //自动关闭时间，默认不关闭
            // key: "id",//如果你的 queueDataList 是个数组对象，可以通过指定提取 key 的方式，来获取到队列数据
            step: 5, //单次上传的数量
            callback: () => {
              tableRef.value?.finishedBatch();
              tableRef.value?.reloadData();
            }
          });
        }
      });
      break;
    case "clearance_edit_sku":
      //   editState.visible = true;
      editCustomsClearanceShowFn({
        queue: [...selectedKeys],
        query: {
          type_id: props.treeSelected,
          is_sku: 1
        },
        callback: params => {
          batchQueueRun({
            postFn: saveBatchEditClearanceProps,
            params: {
              ...params
            }, //格外参数
            queueDataList: params.queue, //队列数据
            queueApiKey: "product_ids",
            duration: 3, //自动关闭时间，默认不关闭
            // key: "id",//如果你的 queueDataList 是个数组对象，可以通过指定提取 key 的方式，来获取到队列数据
            step: 5, //单次上传的数量
            callback: () => {
              tableRef.value?.finishedBatch();
              tableRef.value?.reloadData();
            }
          });
        }
      });
      break;

    case "qifa":
      batchQueueRun({
        postFn: batchQifaAuditingApi,
        params: {
          type: 1,
          type_id: props.treeSelected
        }, //格外参数
        queueDataList: [...selectedKeys], //队列数据
        queueApiKey: "product_ids",
        duration: 3, //自动关闭时间，默认不关闭
        // key: "id",//如果你的 queueDataList 是个数据对象，可以通过指定提取 key 的方式，来获取到队列数据
        step: 5, //单次上传的数量
        callback: () => {
          tableRef.value?.finishedBatch();
          tableRef.value?.reloadData();
        }
      });
      break;
    case "clearance":
      batchQueueRun({
        postFn: batchCustomsClearanceAuditingApi,
        params: {
          type: 2,
          type_id: props.treeSelected
        }, //格外参数
        queueDataList: [...selectedKeys], //队列数据
        queueApiKey: "product_ids",
        duration: 3, //自动关闭时间，默认不关闭
        // key: "id",//如果你的 queueDataList 是个数据对象，可以通过指定提取 key 的方式，来获取到队列数据
        step: 5, //单次上传的数量
        callback: () => {
          tableRef.value?.finishedBatch();
          tableRef.value?.reloadData();
        }
      });
      break;
    case "cancelAuditQifa":
      batchQueueRun({
        postFn: batchCancelAuditingApi,
        params: {
          type: 1,
          type_id: props.treeSelected
        }, //格外参数
        queueDataList: [...selectedKeys], //队列数据
        queueApiKey: "product_ids",
        duration: 3, //自动关闭时间，默认不关闭
        // key: "id",//如果你的 queueDataList 是个数据对象，可以通过指定提取 key 的方式，来获取到队列数据
        step: 5, //单次上传的数量
        callback: () => {
          tableRef.value?.finishedBatch();
          tableRef.value?.reloadData();
        }
      });
      break;
    case "cancelAuditClearance":
      batchQueueRun({
        postFn: batchCancelAuditingApi,
        params: {
          type: 2,
          type_id: props.treeSelected
        }, //格外参数
        queueDataList: [...selectedKeys], //队列数据
        queueApiKey: "product_ids",
        duration: 3, //自动关闭时间，默认不关闭
        // key: "id",//如果你的 queueDataList 是个数据对象，可以通过指定提取 key 的方式，来获取到队列数据
        step: 5, //单次上传的数量
        callback: () => {
          tableRef.value?.finishedBatch();
          tableRef.value?.reloadData();
        }
      });
      break;
    case "application_label":
      if (props.label == 1) {
        applicationLabelShowFn(selectedKeys, true);
      }

      break;
    case "delete":
      //删除功能
      deleteMoreConfirmFn("del").then(res => {
        setTimeout(() => {
          batchQueueRun({
            postFn: batchDeleteApi,
            params: {
              demo: "otherProps"
            }, //格外参数
            queueDataList: [...selectedKeys], //队列数据
            queueApiKey: "product_ids",
            // key: "id",//如果你的 queueDataList 是个数据对象，可以通过指定提取 key 的方式，来获取到队列数据
            //step: 5, //单次上传的数量
            duration: 10, //自动关闭时间，默认不关闭
            callback: () => {
              tableRef.value?.finishedBatch();
              tableRef.value?.reloadData();
            }
          });
        }, 300);
      });

      break;
    default:
      break;
  }
};

//保存当前菜单id
const setMenuIdFun = ()=>{
	if(window.breadcrumbData[2].path == route.path){
		console.log(window.breadcrumbData[2].id)
		userStore.setMenuId(window.breadcrumbData[2].id);
	}
}

// 操作列下拉选项点击事件
const handleHandlerClick: MerakXTableProps["handlerClick"] = async ({ type, params }) => {
  //console.log(params.row)
  const goodsId = params.row?.goods_id;
  const copyId = params.row?.product_id;
  const typeId = params.row?.type_id;
  const typeTitle = params.row?.basic_type;
  //const setId = params.row?.set;
  const suite = !!params.row?.is_packing ? 1 : 0;
  let product_id = copyId;
  switch (type) {
    case "detail":
		setMenuIdFun()
		router.push({
			name: "goodsDetailMessage",
			query: {
			  t_id: typeId,
			  p_id: copyId,
			  s_id: suite,
			  type: props.type,
			  g_id: goodsId,
			  key: "sku_info",
			  name: params.row?.spu
			}
		});
      break;
    case "enum":
      enumState.visible = true;
      break;
    case "copy":
      emit("add", {
        copyId,
        typeId,
        typeTitle,
        suite
      });
      break;
    case "qifa":
      deleteMoreConfirmFn("qifa").then(res => {
        batchQueueRun({
          mode: "simple", //simple简单版本，没有弹窗，只有loading和结果提示，默认值:无
          loadingContext: ".el-main", //显示loading 的上下文（className） 默认.el-main
          postFn: batchQifaAuditingApi,
          params: {
            type: 1,
            type_id: typeId
          }, //格外参数
          queueDataList: [product_id], //队列数据
          queueApiKey: "product_ids",
          // key: "id",//如果你的 queueDataList 是个数据对象，可以通过指定提取 key 的方式，来获取到队列数据
          step: 5, //单次上传的数量
          duration: 3, //自动关闭时间，默认不关闭
          callback: () => {
            tableRef.value?.finishedBatch();
            tableRef.value?.reloadData();
          }
        });
      });
      break;
    case "clearance":
      deleteMoreConfirmFn("clearance").then(res => {
        batchQueueRun({
          mode: "simple", //simple简单版本，没有弹窗，只有loading和结果提示，默认值:无
          loadingContext: ".el-main", //显示loading 的上下文（className） 默认.el-main
          postFn: batchCustomsClearanceAuditingApi,
          params: {
            type: 2,
            type_id: typeId
          }, //格外参数
          queueDataList: [product_id], //队列数据
          queueApiKey: "product_ids",
          // key: "id",//如果你的 queueDataList 是个数据对象，可以通过指定提取 key 的方式，来获取到队列数据
          step: 5, //单次上传的数量
          duration: 3, //自动关闭时间，默认不关闭
          callback: () => {
            tableRef.value?.finishedBatch();
            tableRef.value?.reloadData();
          }
        });
      });
      break;
    case "cancelAuditQifa":
      batchQueueRun({
        mode: "simple", //simple简单版本，没有弹窗，只有loading和结果提示，默认值:无
        loadingContext: ".el-main", //显示loading 的上下文（className） 默认.el-main
        postFn: batchCancelAuditingApi,
        params: {
          type: 1,
          type_id: typeId
        }, //格外参数
        queueDataList: [product_id], //队列数据
        queueApiKey: "product_ids",
        // key: "id",//如果你的 queueDataList 是个数据对象，可以通过指定提取 key 的方式，来获取到队列数据
        step: 5, //单次上传的数量
        duration: 3, //自动关闭时间，默认不关闭
        callback: () => {
          tableRef.value?.finishedBatch();
          tableRef.value?.reloadData();
        }
      });
      break;
    case "cancelAuditClearance":
      batchQueueRun({
        mode: "simple", //simple简单版本，没有弹窗，只有loading和结果提示，默认值:无
        loadingContext: ".el-main", //显示loading 的上下文（className） 默认.el-main
        postFn: batchCancelAuditingApi,
        params: {
          type: 2,
          type_id: typeId
        }, //格外参数
        queueDataList: [product_id], //队列数据
        queueApiKey: "product_ids",
        // key: "id",//如果你的 queueDataList 是个数据对象，可以通过指定提取 key 的方式，来获取到队列数据
        step: 5, //单次上传的数量
        duration: 3, //自动关闭时间，默认不关闭
        callback: () => {
          tableRef.value?.finishedBatch();
          tableRef.value?.reloadData();
        }
      });
      break;
    case "application_label":
      if (props.label == 1) {
        applicationLabelShowFn([product_id], false);
      }
      break;
    case "label":
      deleteMoreConfirmFn("label").then(res => {
        batchQueueRun({
          mode: "simple", //simple简单版本，没有弹窗，只有loading和结果提示，默认值:无
          loadingContext: ".el-main", //显示loading 的上下文（className） 默认.el-main
          postFn: batchCustomsClearanceAuditingApi,
          params: {
            type: 2,
            type_id: typeId
          }, //格外参数
          queueDataList: [product_id], //队列数据
          queueApiKey: "product_ids",
          // key: "id",//如果你的 queueDataList 是个数据对象，可以通过指定提取 key 的方式，来获取到队列数据
          step: 5, //单次上传的数量
          duration: 3, //自动关闭时间，默认不关闭
          callback: () => {
            tableRef.value?.finishedBatch();
            tableRef.value?.reloadData();
          }
        });
      });
      break;
    case "delete":
      //删除功能
      deleteMoreConfirmFn("del").then(res => {
        setTimeout(() => {
          batchQueueRun({
            mode: "simple", //simple简单版本，没有弹窗，只有loading和结果提示，默认值:无
            loadingContext: ".el-main", //显示loading 的上下文（className） 默认.el-main
            postFn: batchDeleteApi,
            params: {
              type_id: typeId
            }, //格外参数
            queueDataList: [product_id], //队列数据
            queueApiKey: "product_ids",
            // key: "id",//如果你的 queueDataList 是个数据对象，可以通过指定提取 key 的方式，来获取到队列数据
            step: 5, //单次上传的数量
            duration: 3, //自动关闭时间，默认不关闭
            callback: () => {
              tableRef.value?.finishedBatch();
              tableRef.value?.reloadData();
            }
          });
        }, 300);
      });
      break;
    default:
      break;
  }
};

/**
 * @description: 页面批量操作
 * 使用方法：执行 batchHelp 方法，去控制台看
 * */
const { proxy } = getCurrentInstance();
import { initBathcProcess } from "./batchProcess.ts";
const { batchHelp, batchQueueComponent, batchQueue, batchQueueRun, deleteMoreConfirmFn } = initBathcProcess(proxy);

/**
 * @description: 快速查看
 *
 */
import useQuickView from "./QuickView/index.ts";
const { quickViewComponet, quickShowFn } = useQuickView(proxy);

/**
 * @description: 批量（单个）编辑qifa属性
 */
import goodsEditQifaProps from "./EditQfaProps/index.ts";
const { editPropsComponent, editQifaPropsShowFn } = goodsEditQifaProps(proxy);

/**
 * @description: 批量（单个）编辑清关属性
 */
import goodsEditCustomsClearanceProps from "./EditCustomsClearance/index.ts";
const { editCustomsClearanceComponent, editCustomsClearanceShowFn } = goodsEditCustomsClearanceProps(proxy);

/**
 * @description: 批量（单个）申请标签
 */
import goodsApplicationLabelProps from "./ApplicationLabel/index.ts";
const { applicationLabelComponent, applicationLabelShowFn } = goodsApplicationLabelProps(proxy);

onMounted(() => {});

defineExpose({
  onReload: () => tableRef.value?.reloadData(),
  oncancel: () => tableRef.value?.finishedBatch()
});
</script>
<style lang="scss" scoped>
.all_hint {
  padding: 12px;
  color: #f93a4a;
  display: flex;
  align-items: center;
  background: #fff1ef;
  border-radius: 2px;
  font-size: 12px;
  color: #646567;
  .el-icon {
    margin-right: 10px;
  }
}
.errorList::v-deep .el-dialog .el-dialog__header .el-dialog__title {
  font-size: 16px;
  flex: 1;
}

.errorList::v-deep .el-dialog .el-dialog__header {
  border-bottom: none;
}

.errorList::v-deep .el-dialog .el-dialog__footer {
  border-top: none;
}

.errorList {
  overflow: hidden;
}

.errorItem {
  width: 31%;
  margin-right: 2%;
  font-size: 13px;
  margin-bottom: 20px;
  color: var(--el-header-text-color);
  float: left;
  //text-align: center;
}

.checked_type_success {
  color: #28ae60;
  display: flex;
  align-items: center;

  .el-icon {
    margin-left: 2px;
  }
}

.checked_type_error {
  color: #f93a4a;
  display: flex;
  align-items: center;
  cursor: pointer;

  .el-icon {
    margin-left: 2px;
  }
}

.empty_box {
  .empty_img {
    width: 220px;
    height: 220px;
  }
}

.empty_msg {
  color: #a0a3a9;
  padding-bottom: 50px;
  font-size: 13px;
}
</style>

<style lang="scss" scoped>
.user_box {
  width: 40px;
  height: 40px;
  margin-left: -16px;
  margin-right: -16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;

  .video_icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    pointer-events: none;
  }

  .el-image {
    width: 100%;
    height: 100%;
    pointer-events: all;

    .el-image__error {
      font-size: 8px;
    }
  }
}

:deep(.headTitle) {
  display: flex;
  align-items: center;
  padding-right: 20px;
  .name {
    margin-right: 4px;
  }

  .blueTitle {
    width: 6px;
    height: 6px;
    border: 1px solid #1677ff;
    border-radius: 50%;
    margin-top: 2px;
    margin-right: 2px;
  }

  .greenTitle {
    color: #28ae60;
    margin-top: 3px;
    margin-right: 2px;
    font-size: 20px;
  }
}

.el-image-viewer__canvas img {
  max-height: 80% !important;
}
</style>
